<script setup lang="ts">
import { ref, reactive, unref, computed, PropType } from "vue";
import type { ElForm } from "element-plus";
import { UploadFile } from "@/components/UploadFile";
import { dictType } from "@/utils/dict";
import { baseOpions } from "../config/detail";
import { cloneDeep} from "lodash-es";

const props = defineProps({
  airport: {
    type: Array as PropType<dictType[]>,
    default: () => [],
  },
  data: {
    type: Object,
    default: () => {},
  },
  // add 新增  eidt 编辑   detail 详情
  type: {
    type: String,
    default: "",
  },
});

const mergeProps = ref({});

// 获取表单传输对象
const getProps = computed(() => {
  const propsObj = { ...props };
  Object.assign(propsObj, unref(mergeProps));
  console.log("获取表单对象", propsObj);
  return propsObj;
});

let infoType = computed(() => {
  return getProps.value.type;
});

// const getProps

// 基础信息
const formObj = computed(() => {
  baseOpions.formItem[2].options = getProps.value.airport;
  return {
    ...baseOpions,
  };
});

// 表单参数
const modalForm = computed(() => {
  console.log(infoType.value);
  if (infoType.value !== "add") {
    const propsComputed = unref(getProps);
    let form = cloneDeep(propsComputed.data);
    return  reactive( {
      id: form.id,
      fileList: form.fileUrl ? [form.fileUrl] : [],
      fileUrl: form.fileUrl, // 航线地址
      name: form.name, // 航线名称
      airportId: form.airportId, // 机场id
      note: form.note, // 航线描述
      length: form.length, // 航线长度
    });
  } else {
    return reactive({
      ...formObj.value.modalForm,
    });
  }
});

const UploadFileRef = ref<ComponentRef<typeof UploadFile>>();
const elFormRef = ref<ComponentRef<typeof ElForm>>();

const submit = async () => {
  const uploadFile = unref(UploadFileRef);

  const files = await uploadFile[0]?.uploadFun();
  console.log("files", files);
  modalForm.value.fileList = files;
  let elForm = await unref(elFormRef).validate();

  console.log("elForm校验", elForm, modalForm);
  const query = {
    id:  modalForm.value.id, // id
    fileUrl: files[0], // 航线地址
    name: modalForm.value.name, // 航线名称
    airportId: modalForm.value.airportId, // 机场id
    note: modalForm.value.note, // 航线描述
    length: modalForm.value.length, // 航线长度
  };
  return query;
};

defineExpose({
  submit,
});
</script>

<template>
  <el-form
    ref="elFormRef"
    :rules="formObj.modalRules"
    :model="modalForm"
    label-width="120px"
  >
    <el-form-item
      :prop="formItem.key"
      :label="formItem.label"
      v-for="(formItem, index) in formObj.formItem"
      :key="index"
    >
      <UploadFile
        ref="UploadFileRef"
        :size="'10K'"
        :fileType="[ 'waypoints','kmz']"
        :defaultList="modalForm.fileList"
        v-if="formItem.type === 'upload'"
      />
      <el-input
        v-if="formItem.type === 'input' || formItem.type === 'textarea'"
        :type="formItem.type"
        v-model="modalForm[formItem.key]"
        v-bind="formItem.props"
      />
      <el-select
        class="block_select"
        v-if="formItem.type === 'select'"
        v-model="modalForm[formItem.key]"
        v-bind="formItem.props"
      >
        <el-option
          v-for="item in formItem.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<style lang="less" scoped>
.upload__tip {
  float: right;
  margin: 0;
  margin-left: 15px;
}
.block_select.el-select {
  width: 100%;
}
</style>
